<template>
  <div class="container">
      <div class="handle-box">
          <span style="padding: 8px">名称：</span>
          <el-input v-model="query.title" placeholder="标签名称" class="handle-input mr10" style="width: 20%"></el-input>
          <span style="padding: 8px"></span>
          <el-button type="success" size="medium" icon="el-icon-search" @click="initAjaxMethod">搜索</el-button>
          <!-- <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="reset">重置</el-button> -->
      </div>
      <div class="roleInput">
          <!-- <el-button type="primary" size="medium" @click="handleAdd" v-if="roulShowList.btn1.type">新建一级类目</el-button> -->
           <!-- <el-button type="primary" size="medium" @click="handleAdd" v-if="roulShowList.btn1.type">添加</el-button> -->
      </div>
      <div>
          <el-table
              :data="tableData"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              border
              :default-expand-all="false"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
              <el-table-column prop="id" label="" width="80" align="left">
                  <template slot-scope="scope">
                      {{ scope.row ? '' : '' }}
                  </template>
              </el-table-column>
              <el-table-column prop="id" label="ID" align="center"></el-table-column>
              <el-table-column prop="content" label="内容" align="center"></el-table-column>
              <el-table-column prop="s_name" label="会员" align="center"></el-table-column>
              <el-table-column prop="mobile" label="手机" align="center"></el-table-column>
                    <!--<el-table-column prop="description2" label="三级标题" align="center"></el-table-column> -->
              <el-table-column prop="createtime" label="发布时间" align="center"></el-table-column>
         
              <!-- <el-table-column prop="create_time" label="创建时间" align="center">
                  <template slot-scope="scope">
                      <span>{{ scope.row.create_time || formDate }}</span>
                  </template>
              </el-table-column> -->
                <!-- <el-table-column prop="status" label="推荐到首页" width="100" align="center">
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.ishot == 1" type="success">是</el-tag>
                      <el-tag v-if="scope.row.ishot == 0" type="info">否</el-tag>
                  </template>
              </el-table-column> -->

              <!-- <el-table-column prop="status" label="是否开启" width="100" align="center">
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.status == 1" type="success">是</el-tag>
                      <el-tag v-if="scope.row.status == 0" type="info">否</el-tag>
                  </template>
              </el-table-column> -->
              <el-table-column label="操作" align="center" width="420">
                  <template slot-scope="scope">
                      <!-- <el-button
                          icon="el-icon-plus"
                          v-if="scope.row.level == 0 && roulShowList.btn1.type"
                          type="text"
                          @click="handleSecond(scope.row)"
                          >添加二级类目</el-button
                      >
                      <span style="padding: 8px"></span> -->
                      <!-- <el-button v-if="roulShowList.btn3.type" icon="el-icon-edit" type="text" @click="handleEdit(scope.row)"
                          >编辑</el-button> -->
                      <!-- <span style="padding: 8px"></span>
                      <el-switch
                          v-if="roulShowList.btn4.type"
                          v-model="scope.row.status == 1 ? true : false"
                          active-color="#13ce66"
                          inactive-color="#eeeeee"
                          active-text="启用"
                          inactive-text="停用"
                          @change="updatesw(scope.row, 1)"
                      >
                      </el-switch> -->
                      <span style="padding: 8px"></span>
                      <!-- <span v-if="roulShowList.btn2.type">
                          <el-popconfirm title="确定删除吗22？" @confirm="handleDelete(scope.row)">
                              <el-button type="text" slot="reference" icon="el-icon-delete" style="color: #f56c6c">删除2</el-button>
                          </el-popconfirm>
                      </span> -->

 

                       
        <!-- <el-button @click="handleDelete(scope.row)"
                   type="text"
                   size="small"
                   icon="el-icon-delete"
                   class="red">删除</el-button> -->


                  </template>
              </el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination
                  layout="sizes,total, prev, pager, next, jumper"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :page-sizes="[10, 20, 50, 100, 150, 200]"
                  @size-change="handleSizeChange"
                  :total="pageTotal"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
      </div>
      <!--添加组织名称-->
      <el-dialog :title="rbacTitle" :visible.sync="editVisible" width="50%">
          <div class="list-group">

            
              <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="3">                          
                           <div class="list-title">排序:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input v-model="displayorder" placeholder="请填写" maxlength="100" show-word-limit></el-input>
                      </el-col>
                  </el-row>
              </div>
             


              <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="3">
                          <!-- <div class="list-title"><span class="mast-icon">*</span>{{ level == 0 ? '一级' : '二级' }}分类名称:</div> -->
                           <div class="list-title">标题:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input v-model="title" placeholder="请填写"  ></el-input>
                      </el-col>
                  </el-row>
              </div>
 
              
              <!-- <div style="padding: 10px">

                  <el-row :gutter="20">
                      <el-col :span="6">
                          <div class="list-title">是否显示:</div>
                      </el-col>
                      <el-col :span="18">
                        <el-radio-group v-model="ishot">
                            <el-radio :label="1">是</el-radio>
                              <el-radio :label="0">否</el-radio>
                    
                          </el-radio-group>
                      </el-col>
                  </el-row> 
                  </div> -->
 
              <!-- <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="6">
                          <div class="list-title">图标:</div>
                      </el-col>
                      <el-col :span="18">
                          <img-upload :img-url.sync="img_url"></img-upload>
                          <p style="color: red">图片规格：750*340，大小300kb以内(格式：jpg,jpeg,png,gif,bmp)</p>
                      </el-col>
                  </el-row>
              </div> -->

               <div class="list-group" >
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">内容:</div>
                    </el-col>
                    <el-col :span="19">
                        <div  >
                            <vue-editor :content="content" ref="myTextIntro"></vue-editor>
                        </div>
                    
                    </el-col>
                </el-row>
            </div>
 
              

          </div>
          <span slot="footer" class="dialog-footer">
              <el-button size="medium" @click="editVisible = false">取 消</el-button>
              <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import api from '@/api/index';
import imgUpload from '../../commons/ImgUpload';
import vueEditor from '@/components/views/commons/VueUeditorWrap';
import { getdate } from '@/utils/utils';
import _ from 'lodash';
import axios from "axios";
export default {
  components: { imgUpload,vueEditor },
  data() {
      return {
          rbacTitle: '',
          editOrAdd: 1,
          editVisible: false,
          tableData: [],
          cascaderData: [],
          options: [],
          displayorder: '',
          title: '',
          content: '',
          parent_id: 0,
          link1title: '',
          img_url: '',
          link1: '',
          link2title: '',
          link2:'',
          link3title:'',
          link3:'',
          link1title:'',
          id: null,
          query: {
              pageIndex: 1,
              pageSize: 10,
              title: ''
          },
          pageTotal: 0,
          level: 0,
          roulShowList: {
              btn1: { rule: 'tagmanage,main,add', type: true, name: '新增' },
              btn2: { rule: 'tagmanage,main,del', type: true, name: '删除' },
              btn3: { rule: 'tagmanage,main,edit', type: true, name: '编辑' },
              btn4: { rule: 'tagmanage,main,edit_disabled', type: true, name: '禁用' },
              btn5: { rule: 'tagmanage,main,edit_warn', type: true, name: '告警' }
          }
      };
  },
  filters: {
      formDate(val) {
          if (!val) return '';
          return getdate(val);
      }
  },
  mounted() {
      this.initAjaxMethod();
      // this.roleMethod()
  },
  methods: {
      reset() {
          this.query.pageIndex = 1;
          this.query.title = '';
          this.initAjaxMethod();
      },
      // 分页导航
      handlePageChange(val) {
          this.$set(this.query, 'pageIndex', val);
          this.initAjaxMethod();
      },
      handleSizeChange(e) {
          this.query.pageSize = e;
          this.initAjaxMethod();
      },
      //初始化页面列表
      initAjaxMethod() {
          const loading = this.$loading({ text: '加载中...' });
          this.$http
              .post(api.wctshengsu_INDEX, {
                  page: this.query.pageIndex,
                  listRows: this.query.pageSize,
                  title: this.query.title
              })
              .then((res) => {
                  loading.close();
                  if (res.code == 1) {
                      let list = Array.isArray(res.data.list) ? res.data.list : [];
                      // list.forEach((item) => {
                      //     item.childrenNum = 0;
                      //     if (Array.isArray(item.children) && item.children.length > 0) {
                      //         item.childrenNum = item.children.length;
                      //     }
                      // });
                      this.tableData = list;
                      this.pageTotal = res.data.total;
                  } else {
                      this.$message.error(res.msg);
                  }
              })
              .catch((err) => {
                  this.$message.error(err.msg);
              });
      },
      //新增
      handleAdd() {
          this.editVisible = true;
          this.editOrAdd = 1;
          this.parent_id = 0;

 
          this.displayorder = '';
          this.title = '';   
          this.content = '';  
          this.link1title = '';  
          this.img_url = '';
          this.link1 = '';
          this.link2title = '';
          this.link2 = '';
          this.link3title = '';
          this.link3 = '';
          this.id = null;
          this.rbacTitle = '新增';
          this.level = 0;
      },
      //点击编辑
      handleEdit(data) {
          console.log(data);
          this.editVisible = true;
          this.editOrAdd = 2;
          this.id = data.id;
          this.parent_id = data.parent_id;
 

          this.displayorder = data.displayorder;
          this.title = data.title;
          this.content = data.content;
          this.link1title = data.link1title;
          this.link1 = data.link1;
          this.link2title = data.link2title;
          this.link2 = data.link2;
          this.link3title = data.link3title;
          this.link3 = data.link3;
          // this.link1title = data.link1title;
          this.rbacTitle = data.level == 0 ? '编辑' : '编辑二级标签';
          this.level = data.level;
           
 
           
      },
      
      //弹出框确定
      saveEdit() {
          if (!this.title || this.title == '') {
              return this.$message.error('请填写分类名称!');
          }
          let parmam = { 

              displayorder: this.displayorder,
              title: this.title,
              content :this.content,
              link1title :this.link1title,
              link1 :this.link1,
              link2title :this.link2title,
              link2 :this.link2,
              link3title :this.link3title,
              link3 :this.link3,
              detail: '新增：' + this.title
          };
          let url = api.wctshengsu_ADD;
          if (this.editOrAdd == 2) {
              parmam.id = this.id;
              parmam.detail = '编辑：' + this.title;
              url = api.wctshengsu_EDIT;
          }
          const loading = this.$loading({ text: '保存中...' });
          this.$http
              .post(url, parmam)
              .then((res) => {
                  loading.close();
                  console.log('新增规则', res);
                  if (res.code == 1) {
                      this.$message.success('操作成功');
                      this.editVisible = false;
                      this.initAjaxMethod();
                  } else {
                      this.$message.error(res.msg);
                  }
              })
              .catch((err) => {
                  this.$message.error(err.msg);
              });
      },
      updatesw(data, flag) {
          let url = '',
              status = '',
              detail = '';
          if (flag == 1) {
              status = data.status == 0 ? 1 : 0;
              url = api.goods_cate_DISABLED;
              detail = '标签' + data.title + ':' + (data.status == 0 ? '启用' : '停用');
          } else if (flag == 2) {
              status = data.iswarn == 0 ? 1 : 0;
              url = this.$API.ARTICLE_TAG_WARN;
              detail = '标签' + data.title + ':' + (data.iswarn == 0 ? '警示' : '撤销警示');
          }
          const loading = this.$loading({ text: '保存中...' });
          this.$http
              .post(url, { id: data.id, status, detail })
              .then((res) => {
                  loading.close();
                  if (res.code == 1) {
                      this.$message.success('操作成功');
                      this.initAjaxMethod();
                  } else {
                      this.$message.error(res.msg);
                  }
              })
              .catch((err) => {
                  this.$message.error(err.msg);
              });
      },
      //点击删除
    
      //删除
      handleDelete(data){
      this.delAjaxMethod(data.id);
      },

   delAjaxMethod(ids){
    this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.wctshengsu_DEL, {ids:ids})
            .then((res) => {
              loading.close();
              console.log('项目列表', res)
              if (res.code == 1) {
                this.$message.success('删除成功');
                this.query.pageIndex=1;
                this.initAjaxMethod()
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            })
    })
  },

      roleMethod() {
          this.$http.post(this.$API.GET_TRR_PAGE, { rule: 'tagmanage,main' }).then((res) => {
              console.log('页面权限', res);
              if (res.data === 'admin') {
                  for (let i in this.roulShowList) {
                      this.roulShowList[i].type = true;
                  }
              } else {
                  res.data.forEach((item) => {
                      for (let j in this.roulShowList) {
                          if (item.rule == this.roulShowList[j].rule) {
                              this.roulShowList[j].type = true;
                          }
                      }
                  });
              }
          });
      }
  }
};
</script>


<style scoped>
.roleInput {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 0;
}
.list-title {
  /* padding:7px; */
  height: 32px;
  display: flex;
  align-items: center;
}
</style>